<template>
	<view class="detail">
        <SRV-topbar :title="info.pageTitle" :isLeft="true"></SRV-topbar>
		<view class="top">
			<view class="num">
				<text>{{info.nowVal}}</text>
			</view>
			<text>{{info.title}}</text>
            <view class="btnList">
                <text class="btn" @click="jump('merchantOnline', 'merchantKey='+info.merchantKey)">充值</text>
                <text class="btn" v-if="info.storeState" @click="jump('merchantShopInfo', 'id='+info.merchant_id)">商家商城</text>
                <text class="btn" v-if="info.remarkState" @click="showTip()">说明</text>
            </view>
		</view>
		<view class="nav">
			<view @click="getsel(index)" :class="index==selNav?'nav-item hover':'nav-item'" v-for="(item,index) in navList" :key="index">
				<text>{{item.itemName}}</text>
			</view>
		</view>
		<view v-if="pageResult.list.length > 0">
			<view  class="line" v-for="(item,index) in pageResult.list" :key="index">
				<view class="left">
					<view>{{item.remark}}</view>
					<view>{{item.createTime}}</view>
				</view>
				<view class="right" @click="jump(item.jump_type, item.jump_id)">
					<text :class="item.num_type==2?'red':''">{{item.num}}</text>
					<text style="color: #999999;text-align: right;font-size: 30rpx;">{{item.old_num}}</text>
				</view>
			</view>
		</view>
		<view v-else class="nolist">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/forceDetail_nomsg.png" mode="widthFix"></image>
		    <text>暂无相关记录～</text>
		</view>
		<chartsPopup ref="chartsPopup"></chartsPopup>
	</view>
</template>

<script>
    var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import {Base64} from '../static/base64.min.js';
	export default {
		data() {
			return {
                selNav: 0,
				navList: [
				   {"itemId": "0", "itemName" : "全部"},
				   {"itemId": "1", "itemName" : "收入"},
				   {"itemId": "2", "itemName" : "支出"},
                ],
                info: {
                    pageTitle: '',
                    title: '',
                    nowVal: 0,
                    merchant_id: 0,
                    merchantKey: '',
                    remarkState: false,
                    remarkContent: '',
                },
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
                    merchant_id: 0,
					credit_type: '',
					num_type : 0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getsel(index) {
				_self.selNav = index;
				let item = _self.navList[index];
				_self.pageParam.num_type = item.itemId;
				_self.pageParam.page = 0;
				_self.pageResult.list = [];
				_self.getList();
			},
            getInfo() {
            	serve.request({
            		url: '/member/merchant/money-info',
            		data: {
            			appkey: uni.getStorageSync('appkey'),
            			'access-token': uni.getStorageSync('access-token'),
                        merchant_id: _self.pageParam.merchant_id,
                        credit_type: _self.pageParam.credit_type,
            		},
                    v: '/v3',
            	}).then(res => {
                    _self.info = res.data;
            	});
            },
			getList(){
				_self.pageParam.page++
				serve.request({
					url: '/member/merchant/money-log',
					data: _self.pageParam,
                    v: '/v3'
				}).then(res => {
					console.log(res.data); 
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
				});
			},
            showTip() {
                uni.showModal({
                    title:_self.info.title,
                    content: _self.info.remarkContent,
                    showCancel:false,
                });
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
            _self = this;
			_self.pageParam.merchant_id = options.merchant_id || 0;
			_self.pageParam.credit_type = options.credit_type || 'user_money';
		},
		onShow() {
            _self.getInfo();
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onPullDownRefresh() {
            _self.getInfo();
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.detail{
		.pickupView{
			display: flex;
			align-items: center;
			padding: 10rpx 27rpx 10rpx 0rpx;
			box-sizing: border-box;
			text-align: center;
			
			view {
				width: 50%;
				font-size: 32rpx;
				position: relative;
				text-align: center;
			}
		}
		.top{
			position: relative;
			width:100%;
			height:325rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			color:rgba(255,255,255,1);
			background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/forceDetail_bg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.num{
				display: flex;
			    align-items: center;
				font-size:60rpx;
				font-weight:bold;
				color:rgba(255,255,255,1);
				image{
					width:54rpx;
					height:45rpx;
					margin-right: 10rpx;
				}
			}
			
            .btnList {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                // padding: 0 20rpx;
                justify-content: center;
            }
			.btn{
				width:220rpx;
				height:54rpx;
				line-height: 54rpx;
				background:rgba(255,255,255,1);
				border-radius:27rpx;
				margin-top: 20rpx;
				color: #4ac735;
				font-size: 36rpx;
				text-align: center;
                margin-right: 20rpx;
			}
			.gz{
				position: absolute;
				right: 30rpx;
				top: 50rpx;
				font-size: 24rpx;
				color: #333333;
				text-decoration: underline;
			}
		}
		.nav {
			box-sizing: border-box;
			padding: 40rpx 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(60, 72, 104, 0.1) solid;
		
			.nav-item {
				height: 32rpx;
				padding: 0rpx 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(39, 52, 88, 0.5);
				border-bottom: 8rpx rgba(243, 204, 91, 0) solid;
			}
		
			.hover {
				border-bottom: 8rpx rgba(243, 204, 91, 1) solid;
				color: rgba(39, 52, 88, 1);
			}
		}
	    .line{
			display: flex;
			box-sizing: border-box;
			padding: 42rpx 30rpx;
			justify-content: space-between;
			border-bottom: 1rpx rgba(235,236,240,1) solid;
			.left{
				width: 450rpx;
				display: flex;
				flex-direction: column;
				font-size:28rpx;
				color:rgba(60,72,104,1);
				view:last-child{
					font-size:24rpx;
					color:rgba(60,72,104,0.5);
					margin-top: 54rpx;
				}
			}
			.right{
				font-size:36rpx;
				font-weight: bold;
				color:rgba(255,200,10,1);
				display: grid;
				.red{
					color:#EB5938
				}
			}
		}
	    .nolist{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size:28rpx;
            color:rgba(204,204,204,1);
            image{
                margin-top: 140rpx;
                width:112rpx;
                margin-bottom: 45rpx;
            }
        }
	    uni-modal .uni-modal__bd{      
	        white-space: pre-wrap;      
	    }
	}
</style>
